<template>
  <div class="app-container">
    <div class="header">
      <el-row :gutter="20" class="bottom-aligned-row">
        <div class="left-column">查找结果</div>
        <div class="right-column">
          <span v-if="total >= 0">(共{{total}}封关于"<span style="color: red;">{{ selectInputTo }}</span>"的邮件 )</span>
        </div>
      </el-row>
    </div>

<!--    <el-button @click="logicDeleteItems() " >逻辑删除</el-button>-->
    <el-button @click="deleteItems()" >删除邮箱</el-button>
    <el-button @click="allReadItems() " >全部已读</el-button>
    <el-dropdown trigger="click">
      <el-button class="el-dropdown-link">
        标记为...<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item><el-button style="color: #2c3e50" type="text" @click="readItems()">已读邮件</el-button></el-dropdown-item>
        <el-dropdown-item><el-button style="color: #2c3e50" type="text" @click="unReadItems()">未读邮件</el-button></el-dropdown-item>
        <el-dropdown-item><el-button style="color: #2c3e50" type="text" @click="starredItems()">星标邮件</el-button></el-dropdown-item>
        <el-dropdown-item><el-button style="color: #2c3e50" type="text" @click="unStarredItems()">取消星标</el-button></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dropdown trigger="click">
      <el-button class="el-dropdown-link">
        移动到...<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item><el-button style="color: #2c3e50" type="text" @click="inboxItems()">收件箱</el-button></el-dropdown-item>
        <el-dropdown-item><el-button style="color: #2c3e50" type="text" @click="sendItems()">已发送</el-button></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>


  </div>
</template>
<script >

export default {
  name: 'SearchHeader',
  props:{
    logicDeleteMethod: {
      type: Function,
      required: true
    },
    deleteMethod: {
      type: Function,
      required: true
    },
    total:{
      type: Number,
      required: true
    },
    unreadCount:{
      type: Number,
      required: true
    },

    selectInputTo:{
      type: String,
      required: true
    },
    readMethod:{
      type: Function,
      required: true
    },
    unreadMethod:{
      type: Function,
      required: true
    },
    unstarMethod:{
      type: Function,
      required: true
    },
    starMethod:{
      type: Function,
      required: true
    },
    moveMethod2:{
      type: Function,
      required: true
    },
    moveMethod3:{
      type: Function,
      required: true
    },
    allReadMethod:{
      type: Function,
      required: true
    }
  },
  methods: {
    logicDeleteItems() {
      this.logicDeleteMethod(); // 调用父组件传递的删除方法
    },
    deleteItems() {
      this.deleteMethod(); // 调用父组件传递的删除方法
    },
    readItems(){
      this.readMethod();
    },
    unReadItems() {
      this.unreadMethod();
    },
    starredItems(){
      this.starMethod();
    },
    unStarredItems(){
      this.unstarMethod();
    },
    inboxItems(){
      this.moveMethod2();
    },
    sendItems(){
      this.moveMethod3();
    },
    allReadItems(){
      this.$confirm('此操作将把所有邮件标记为已读, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.allReadMethod();
        this.$message({
          type: 'success',
          message: '已读成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
  },
  watch:{
    unreadCount(newVal, oldVal) {
      console.log('Prop changed:', newVal);
      // 你可以在这里执行任何必要的更新操作
    }

  }
}

</script>
<style >
.header{
  margin-bottom: 10px;
  width: 50%;
}
.bottom-aligned-row {
  display: flex;
  align-items: flex-end; /* 垂直对齐到底部 */
}
.left-column {
  font-size: 25px; /* 设置左侧字体大小 */
  text-align: left; /* 确保文本左对齐 */
}
.right-column {
  font-size: 14px; /* 设置右侧字体大小 */
  text-align: left; /* 确保文本左对齐 */
}
</style>